<template>
  <div>
    <template>
      <el-select v-model="value"
                 placeholder="请选择"
                 @change="changeyear()">
        <el-option v-for="item in options"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value">
        </el-option>
      </el-select>
    </template>
    <div id="Enrolment"
         :style="{ width: '1000px', height: '480px' }"></div>
  </div>
</template>
<script>
import axios from 'axios'
import commons from '../../assets/commons'

export default {
  data() {
    return {

      year:{},
      entrance_num:{},
      all_num:{},

      //柱状图动态加入数据
      sources: [],
      tableData: {},

      options: [
        {
          value: '2016',
          label: '2016年升学统计',
        },
        {
          value: '2017',
          label: '2017年升学统计',
        },
        {
          value: '2018',
          label: '2018年升学统计',
        },
        {
          value: '2019',
          label: '2019年升学统计',
        },
        {
          value: '2020',
          label: '2020年升学统计',
        },
      ],
      value: '',
    }
  },

  methods: {
    schoolcontrast() {
      axios.get(commons.baseUrl + 'school/schoolcontrast').then((res) => {
        //res返回结果
        console.log(res)
        this.tableData = res.data,
        this.entrance_num=res.data.entrance_num,
        this.all_num = res.data.all_num,
        this.year=res.data.year
        this.drawChart()
      })
    },
    changeyear(value) {
      this.drawChart(value)
    },

    drawChart() {
      this.duixiang(this.value)
      // 基于准备好的dom，初始化echarts实例
      let enrolment = this.$echarts.init(document.getElementById('Enrolment'))
      //指定图表的配置项和数据
      let option = {
        tooltip: {},
        legend: {},
        dataset: {
          dimensions: ['product', '升学人数', '总人数'],
          source: this.sources,
        },
        xAxis: { type: 'category' },
        yAxis: {},
        series: [{ type: 'bar' }, { type: 'bar' }],
      }
      enrolment.setOption(option)
    },
    duixiang(val, index) {
      for (let i = 0; i < 5; i++) {
        if (val == this.tableData.year=='2016') {
          this.sources[i] = {
            product: this.tableData.school_name,
            升学人数: this.tableData.entrance_num,
            总人数: this.tableData.all_num,
          }
        } else if (val== this.tableData.year == '2017') {
          this.sources[i] = {
            product: this.tableData.school_name,
            升学人数: this.tableData.entrance_num,
            总人数: this.tableData.all_num,
          }
        } else if (val== this.tableData.year == '2018') {
          this.sources[i] = {
            product: this.tableData.school_name,
            升学人数: this.tableData.entrance_num,
            总人数: this.tableData.all_num,
          }
        } else if (val== this.tableData.year == '2019') {
          this.sources[i] = {
            product: this.tableData.school_name,
            升学人数: this.tableData.entrance_num,
            总人数: this.tableData.all_num,
          }
        } else if (val== this.tableData.year == '2020') {
          this.sources[i] = {
            product: this.tableData.school_name,
            升学人数: this.tableData.entrance_num,
            总人数: this.tableData.all_num,
          }
        }
      }
    },
  },

  //生命周期函数,在页面创建成功时回调
  mounted() {
    this.value = '2020'
    this.schoolcontrast()
  },
}
</script>
<style scoped></style>
